<script lang="ts" setup>
import { ref, watch, computed } from "vue";
import { useRouter } from "vue-router";
import {
    Calendar,
    Location,
    Star,
    Share,
    Check,
    ChatDotRound,
    Position,
    Connection,
    MapLocation,
    Clock,
    Promotion,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
const activeTab = ref("detail");
const activePositions = ref([0]); // 默认展开第一个职位
const shareLink = ref(window.location.href);
const mapVisible = ref(false);

// 定义组件属性
const props = defineProps({
    hire: {
        type: Object,
        required: true,
    },
});

// 定义事件
const emit = defineEmits(["apply", "collect", "share", "view-more"]);

// 日期格式化
const formatDateTime = (dateTimeString) => {
    const date = new Date(dateTimeString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(
        2,
        "0"
    )} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
};

// 收藏状态
const isCollected = ref(false);

// 按钮事件处理
const handleApply = () => {
    ElMessageBox.confirm("确认要报名参加此次招聘活动吗？", "报名确认", {
        confirmButtonText: "确认报名",
        cancelButtonText: "取消",
        type: "info",
    })
        .then(() => {
            ElMessage.success("报名成功！");
            emit("apply", props.hire.id);
        })
        .catch(() => {});
};

const handleCollect = () => {
    ElMessage.success("收藏成功！");
    emit("collect", props.hire.id);
};

const showLocationMap = (location) => {
    mapVisible.value = true;
    // 实际项目中这里应调用地图API
    setTimeout(() => {
        // 模拟地图加载
        const mapContainer = document.getElementById("location-map");
        if (mapContainer) {
            mapContainer.innerHTML = `<div style="text-align: center; padding: 20px;">地图加载中: ${location}</div>`;
        }
    }, 300);
};

const copyLink = () => {
    navigator.clipboard.writeText(shareLink.value);
    ElMessage.success("链接已复制到剪贴板");
    emit("share", { id: props.hire.id, link: shareLink.value });
};

// 触发查看更多事件
const handleViewMore = () => {
    emit("view-more");
};
</script>

<template>
    <el-card v-if="hire" class="detail-card">
        <!-- 公司基本信息 -->
        <el-descriptions :column="1" border>
            <template #title>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="20" :lg="20">
                        <div class="company-header">
                            <el-avatar :size="60" :src="hire.companyLogo" />
                            <div class="company-info">
                                <h3>{{ hire.title }}</h3>
                                <p>{{ hire.companyName }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="4" :lg="4" class="action-col">
                        <el-button type="primary" @click="handleApply">立即报名</el-button>
                    </el-col>
                </el-row>
            </template>

            <el-descriptions-item label="活动时间">
                {{ formatDateTime(hire.startTime) }} 至 {{ formatDateTime(hire.endTime) }}
            </el-descriptions-item>

            <el-descriptions-item label="活动地点">
                <el-space>
                    {{ hire.location }}
                    <el-button type="primary" link @click="showLocationMap(hire.location)">
                        <el-icon><MapLocation /></el-icon> 查看地图
                    </el-button>
                </el-space>
            </el-descriptions-item>

            <el-descriptions-item label="活动形式">
                {{ hire.mode }}
            </el-descriptions-item>

            <el-descriptions-item label="目标院校">
                <el-space wrap>
                    <el-tag v-for="school in hire.targetSchools" :key="school" size="small">
                        {{ school }}
                    </el-tag>
                </el-space>
            </el-descriptions-item>

            <el-descriptions-item label="目标专业">
                <el-space wrap>
                    <el-tag v-for="major in hire.targetMajors" :key="major" size="small" type="success">
                        {{ major }}
                    </el-tag>
                </el-space>
            </el-descriptions-item>
        </el-descriptions>

        <!-- 详情标签页 -->
        <el-tabs v-model="activeTab" class="mt-4">
            <el-tab-pane label="活动详情" name="detail">
                <el-card shadow="never">
                    <div v-html="hire.description"></div>
                </el-card>
            </el-tab-pane>

            <el-tab-pane label="招聘岗位" name="positions">
                <el-collapse v-model="activePositions">
                    <el-collapse-item v-for="(position, index) in hire.positions" :key="index" :name="index">
                        <template #title>
                            <el-space>
                                <span>{{ position.name }}</span>
                                <el-tag size="small">招{{ position.count }}人</el-tag>
                            </el-space>
                        </template>

                        <el-descriptions :column="1" border size="small">
                            <el-descriptions-item label="工作地点">
                                {{ position.workLocation }}
                            </el-descriptions-item>

                            <el-descriptions-item label="学历要求">
                                {{ position.education }}
                            </el-descriptions-item>

                            <el-descriptions-item label="专业要求">
                                <el-space wrap>
                                    <el-tag v-for="major in position.majors" :key="major" size="small" type="info">
                                        {{ major }}
                                    </el-tag>
                                </el-space>
                            </el-descriptions-item>

                            <el-descriptions-item label="岗位描述">
                                <div v-html="position.description"></div>
                            </el-descriptions-item>

                            <el-descriptions-item label="岗位要求">
                                <div v-html="position.requirements"></div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>

            <el-tab-pane label="公司简介" name="company">
                <el-card shadow="never">
                    <el-row>
                        <el-col :span="24">
                            <el-descriptions :column="1" border>
                                <template #title>
                                    <el-space>
                                        <el-avatar :size="40" :src="hire.companyLogo" />
                                        <span>{{ hire.companyName }}</span>
                                    </el-space>
                                </template>

                                <el-descriptions-item label="行业">
                                    {{ hire.companyIndustry }}
                                </el-descriptions-item>

                                <el-descriptions-item label="规模">
                                    {{ hire.companySize }}
                                </el-descriptions-item>

                                <el-descriptions-item label="简介">
                                    <div v-html="hire.companyDescription"></div>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
        </el-tabs>

        <!-- 底部操作区 -->
        <el-row class="mt-4">
            <el-col :span="24" style="text-align: center">
                <el-space>
                    <el-button type="primary" plain @click="handleApply">
                        <el-icon><Check /></el-icon> 立即报名
                    </el-button>

                    <el-button
                        :icon="isCollected ? Star : Star"
                        circle
                        @click="handleCollect"
                        :class="{ 'is-collected': isCollected }"
                    ></el-button>

                    <el-popover placement="top" width="160" trigger="click">
                        <template #reference>
                            <el-button>
                                <el-icon><Share /></el-icon> 分享
                            </el-button>
                        </template>
                        <div style="text-align: center">
                            <el-space direction="vertical">
                                <el-space>
                                    <el-button circle>
                                        <el-icon><ChatDotRound /></el-icon>
                                    </el-button>
                                    <el-button circle>
                                        <el-icon><Position /></el-icon>
                                    </el-button>
                                    <el-button circle>
                                        <el-icon><Connection /></el-icon>
                                    </el-button>
                                </el-space>
                                <el-input v-model="shareLink" size="small">
                                    <template #append>
                                        <el-button @click="copyLink">复制</el-button>
                                    </template>
                                </el-input>
                            </el-space>
                        </div>
                    </el-popover>
                </el-space>
            </el-col>
        </el-row>

        <!-- 底部操作按钮 -->
        <div class="card-actions">
            <div class="action-left">
                <el-button
                    :icon="isCollected ? Star : Star"
                    circle
                    @click="handleCollect"
                    :class="{ 'is-collected': isCollected }"
                ></el-button>
                <el-button :icon="Share" circle @click="handleViewMore"></el-button>
            </div>
            <div class="action-right">
                <el-button type="primary" @click="handleViewMore">查看更多信息</el-button>
            </div>
        </div>
    </el-card>

    <el-empty v-else description="请从左侧选择一个招聘活动" :image-size="200"> </el-empty>

    <!-- 地图弹窗 -->
    <el-dialog v-model="mapVisible" title="活动地点" width="70%">
        <div id="location-map" style="height: 400px"></div>
    </el-dialog>
</template>

<style scoped>
.detail-card {
    height: 100%;
    overflow: auto;
    transition: all 0.3s ease;
}

.company-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.company-info {
    display: flex;
    flex-direction: column;
}

.company-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.company-info p {
    margin: 0;
    color: #606266;
    font-size: 14px;
}

.action-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.mt-4 {
    margin-top: 20px;
}

/* 自定义描述列表样式 */
:deep(.el-descriptions__header) {
    margin-bottom: 15px;
}

:deep(.el-descriptions__title) {
    font-weight: 600;
    font-size: 16px;
}

:deep(.el-descriptions__label) {
    color: #606266;
    font-weight: 500;
}

:deep(.el-descriptions__content) {
    font-weight: 400;
    color: #303133;
}

:deep(.el-descriptions-item__container) {
    margin-bottom: 4px;
}

/* 标签样式调整 */
:deep(.el-tag) {
    margin: 0 4px 4px 0;
    font-weight: 400;
}

/* 标签页样式 */
:deep(.el-tabs__nav) {
    border: none;
}

:deep(.el-tabs__item) {
    font-weight: 500;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
}

:deep(.el-tabs__item.is-active) {
    color: var(--el-color-primary);
    font-weight: 600;
}

:deep(.el-tabs__active-bar) {
    height: 3px;
    border-radius: 3px;
}

/* 折叠面板样式 */
:deep(.el-collapse) {
    border: none;
}

:deep(.el-collapse-item__header) {
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
}

:deep(.el-collapse-item__content) {
    padding: 16px 0;
}

/* 按钮组样式 */
:deep(.el-space) {
    margin-top: 10px;
}

/* 内容样式 */
:deep(.el-card__body) {
    color: #303133;
    line-height: 1.6;
}

/* 增强地图弹窗的科技感 */
:deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
}

:deep(.el-dialog__header) {
    padding: 16px 20px;
    margin-right: 0;
    border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__title) {
    font-weight: 600;
    font-size: 16px;
}

:deep(.el-dialog__body) {
    padding: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .action-col {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .company-header {
        flex-direction: column;
        align-items: flex-start;
    }

    :deep(.el-avatar) {
        margin-bottom: 10px;
    }
}

.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;

    .action-left {
        display: flex;
        gap: 10px;

        .is-collected {
            color: #ff9800;
        }
    }
}
</style>
